{"componentChunkName":"component---src-pages-projects-js","path":"/projects/","result":{"data":{"allStrapiProjects":{"nodes":[{"github":"https://github.com/rahmed19/netflix","id":"Projects_1","description":"This demo React.JS project was developed as part of my frontend certification program at Scrimba.com. The course involved the use of Styled Components, a Firebase backend and a host of other React.JS related technologies that made it a tremendous learning experience. My special thanks to the instructor, Karl Hadwen, for making this happen. ","title":"Netflix clone","url":"https://netflixrahmed.netlify.app","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAC4jAAAuIwF4pT92AAADJElEQVQozwEZA+b8AEE2LVE8MmQ9M4c6M5g5OGwuKD0sI2pEOGNBNXJDNpQ/N5Y/OXtDNmhGNmREN0AuJWE2LJk8N40/OW9ANwBMODBgPjR5OzHMP0D/V2qcIiZHKyF6RDdyQjaKPDHjTFP0WmOaOC90RjdyQzdJLSV+KyX6TlrlUFeKODEAVTkvazwzjDgw0ztA/VltqyAnVSkhiEA0gT8znDgw5ExU81pmpzQtgUQ1fkE0VSwjkSgm/VRh6lNbmzYwAGY7MYlANq05M+hAR/9je8chLW0qJK1COaM/Ob44M/hTXvhkb8E1MpdEN5RCNmouJ6cqKf9WZvVUYKw1MgBsMiiGJyKrJyTEJy64NT6LFRhpHBeNJxyVKCGyJyGwMS/aPkS0KSOuPDKfNilxJRyaHxvsUlvUUE63Mi8AbigeWwwJjhEQjQ0TjxEaoxMddhcUfxUMnRwXnRUQrzAw5kFMlhUPujEqnSYbZhwRoxQYlDAgqjElwjIzAHknHlIMCG4NCp8RGYIVF6ASGo0fHpobFbklI6sYFKcrKe1DT6MVE8U2L6YmHGIZEMgeKY4dFc4tNMw4OQBzKB5rCwtaCgaTDBKcFSC3FiSCIB2VFxGvJyKmFBDRPEH6VmGgCwe4MCalIBdrFw+yGh+BFg7CJivKOjsAZikgeRERgxAQqBEapB8mgA4Rch4dmSMgnjApqB8d4kBL+VhjrBMTliMZmyEZbxQThg0Oxy03rContzEyAF4yKXwvKqUtK9ozO/9VabgdJ10kH5Y+NY0/NKA2MOZNUvNaYrIxLpxGNpM/M18hH6EkJP9NXd9IUKUzLwBTNi5tOzKLNy/QNzz/V2eqIylSKSGJRjiESDiPODDhSlH0XmSkNzCLTjmERzdOJiCSLSj+UV3rUFiePTUASTUtXTsyejowyDs8/1tooicpRysigEs6fkw5iT8z5FlU9GNknDowhFE7fks6Qychhy8n/U9b5U9WkkA1AEEzK1A5MGc6MLM5OPdRXY8oJz4sIXdMOndMOH1DM9hZT+pgWoo7MGxGNnZNOTsoIXMuJu5LUtJOT30/M1DlBRU/T6m5AAAAAElFTkSuQmCC","aspectRatio":1.5037593984962405,"src":"/static/37b387a86b175c09c5d161520ff2549c/46878/e06a9d3c4091643ab800f4df8e699269.png","srcSet":"/static/37b387a86b175c09c5d161520ff2549c/69585/e06a9d3c4091643ab800f4df8e699269.png 200w,\n/static/37b387a86b175c09c5d161520ff2549c/497c6/e06a9d3c4091643ab800f4df8e699269.png 400w,\n/static/37b387a86b175c09c5d161520ff2549c/46878/e06a9d3c4091643ab800f4df8e699269.png 646w","sizes":"(max-width: 646px) 100vw, 646px"}}},"stack":[{"id":1,"title":"React.JS"},{"id":20,"title":"Styled Components"},{"id":28,"title":"Firebase"},{"id":39,"title":"html"},{"id":40,"title":"css"},{"id":41,"title":"javascript"}]},{"github":"https://github.com/rahmed19/ecommerce-webstore","id":"Projects_2","description":"This eCommerce demo website makes use of React.JS and MaterialUI frontend along with a fantastic headless commerce backend provided by Commercejs.com. A demo online store includes items to select from, an option to add those items to a cart and checkout with Stripe. It also allows for users to pick out their delivery locations and the price is adjusted programmatically. My special thanks to the YouTube channel, JavascriptMastery that made this course possible. ","title":"CommerceJS eCommerce Platform","url":"https://commercejsrahmed.netlify.app/","image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMBBf/EABQBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAebKBAwX/8QAFxABAQEBAAAAAAAAAAAAAAAAAREQAP/aAAgBAQABBQKgIODOsz//xAAXEQADAQAAAAAAAAAAAAAAAAABAhAR/9oACAEDAQE/AQuT/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Bp//EABcQAQADAAAAAAAAAAAAAAAAABEBICH/2gAIAQEABj8CMlt//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITFRYf/aAAgBAQABPyHQAa+ksG++RxYtqguGLbP/2gAMAwEAAgADAAAAEDjP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAEDAQE/EIUx/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEB/9oACAECAQE/ENtX/8QAHBABAAIDAAMAAAAAAAAAAAAAAQARITFhUYGR/9oACAEBAAE/EERZOh9I8oyLTg5yYrdPiJJbK9R60GIitq2z/9k=","aspectRatio":1.6260162601626016,"src":"/static/c8a95e97ebe0c522a60b6fc692ca6697/14b42/a02c9c9dae5a3597b46f4083c1ea606f.jpg","srcSet":"/static/c8a95e97ebe0c522a60b6fc692ca6697/f836f/a02c9c9dae5a3597b46f4083c1ea606f.jpg 200w,\n/static/c8a95e97ebe0c522a60b6fc692ca6697/2244e/a02c9c9dae5a3597b46f4083c1ea606f.jpg 400w,\n/static/c8a95e97ebe0c522a60b6fc692ca6697/14b42/a02c9c9dae5a3597b46f4083c1ea606f.jpg 800w,\n/static/c8a95e97ebe0c522a60b6fc692ca6697/47498/a02c9c9dae5a3597b46f4083c1ea606f.jpg 1200w,\n/static/c8a95e97ebe0c522a60b6fc692ca6697/37d86/a02c9c9dae5a3597b46f4083c1ea606f.jpg 1500w","sizes":"(max-width: 800px) 100vw, 800px"}}},"stack":[{"id":10,"title":"React.JS"},{"id":6,"title":"Material UI"},{"id":38,"title":"CommerceJS"},{"id":48,"title":"Javascript"},{"id":49,"title":"html"},{"id":50,"title":"css"}]},{"github":"https://github.com/rahmed19/Firegram","id":"Projects_3","description":"This simple yet elegantly designed website allows for users to view a photo gallery. My changes allow the code to programmatically remove the newly uploaded images by the user after 7 seconds of demonstration. I also added a few more options for the user to be able to scroll through the gallery on the modal. With a React.JS frontend and a Firebase backend, this beautiful project was a lot of fun to work with and a great learning experience. My special thanks to Travesy Media for offering this course on YouTube.","title":"Firegram Photo Gallery","url":"https://firegramrahmed.netlify.app/","image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAAF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgH/2gAMAwEAAhADEAAAAc1YkhqtGp//xAAbEAACAQUAAAAAAAAAAAAAAAABAwIAESExQv/aAAgBAQABBQIQXdCoyBTnpOzX/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8Biv/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwGsf//EABsQAAIBBQAAAAAAAAAAAAAAAAARAQIQITOB/9oACAEBAAY/AstIlUs1nL//xAAcEAACAgIDAAAAAAAAAAAAAAAAAREhEDFRYXH/2gAIAQEAAT8hcbkF6W8e3ZFBNg0Gx//aAAwDAQACAAMAAAAQ+P8A/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERIXH/2gAIAQMBAT8QVJMn/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERITH/2gAIAQIBAT8Qa4KV0//EABwQAQACAgMBAAAAAAAAAAAAAAEAESExQXGxof/aAAgBAQABPxAzwLgg4c51cqLBzRTBoWG64coHkNu/k+smron/2Q==","aspectRatio":2.247191011235955,"src":"/static/960c3871ad765cbaa21d002e8ddd15a4/14b42/a3cb1956445edba9573c7d288e5cc5e5.jpg","srcSet":"/static/960c3871ad765cbaa21d002e8ddd15a4/f836f/a3cb1956445edba9573c7d288e5cc5e5.jpg 200w,\n/static/960c3871ad765cbaa21d002e8ddd15a4/2244e/a3cb1956445edba9573c7d288e5cc5e5.jpg 400w,\n/static/960c3871ad765cbaa21d002e8ddd15a4/14b42/a3cb1956445edba9573c7d288e5cc5e5.jpg 800w,\n/static/960c3871ad765cbaa21d002e8ddd15a4/47498/a3cb1956445edba9573c7d288e5cc5e5.jpg 1200w,\n/static/960c3871ad765cbaa21d002e8ddd15a4/0e329/a3cb1956445edba9573c7d288e5cc5e5.jpg 1600w,\n/static/960c3871ad765cbaa21d002e8ddd15a4/52258/a3cb1956445edba9573c7d288e5cc5e5.jpg 1800w","sizes":"(max-width: 800px) 100vw, 800px"}}},"stack":[{"id":12,"title":"React.JS"},{"id":27,"title":"Firebase"},{"id":37,"title":"Framer Motion"},{"id":45,"title":"html"},{"id":47,"title":"css"},{"id":46,"title":"javascript"}]},{"github":"https://github.com/rahmed19/wildfire-tracker","id":"Projects_4","description":"Powered by React.JS and a NASA open API, this simple yet unique demo website allows for users to browse for global events on Google Maps. While originally designed as Wildfire tracker, my additions included adding the ability to search for active Volcanos as well. Making my additions allowed for me to gain a lot experience in using different React.JS and vanilla JavaScript tools. My special thanks to TraversyMedia for the original course on YouTube. ","title":"Global Events Tracker","url":"https://eventstrackerrahmed.netlify.app/","image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAeABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAwUC/8QAFwEBAAMAAAAAAAAAAAAAAAAAAQACA//aAAwDAQACEAMQAAABRsX5zu2JkaoY0EyDbB//xAAcEAACAgIDAAAAAAAAAAAAAAABAgADERMQISL/2gAIAQEAAQUCGsowrMr6Xa0BGA5h4zA1eFprI8rP/8QAFxEBAQEBAAAAAAAAAAAAAAAAABIRIf/aAAgBAwEBPwHjUpf/xAAXEQEBAQEAAAAAAAAAAAAAAAAAERIh/9oACAECAQE/AeorT//EAB4QAAIABgMAAAAAAAAAAAAAAAABAhARIUFREjGx/9oACAEBAAY/Aod+lrGDUsT6LwNsT4lKH//EAB0QAQACAgMBAQAAAAAAAAAAAAEAESExQVFhcYH/2gAIAQEAAT8hNngufEebvTyLAuDEzCWKQOIGywRVfsmkHuHSB14DnE5uy9x0qfJ//9oADAMBAAIAAwAAABBMJ33/xAAZEQADAAMAAAAAAAAAAAAAAAAAAREhMVH/2gAIAQMBAT8QuiEkKbwyun//xAAYEQEBAAMAAAAAAAAAAAAAAAABACFRcf/aAAgBAgEBPxDZlSQyXF//xAAeEAEBAAICAgMAAAAAAAAAAAABEQAhMUFhsXGBwf/aAAgBAQABPxCQHmqpTron7iYutFp4b6+8ukqG3nKhyMwYjqZZDJsxdbX3jevRvLvDgPjETSngcUKEokGRRJRTl1gOhr3n/9k=","aspectRatio":0.6622516556291391,"src":"/static/2671afe594229fe1664a40807eb35854/14b42/18368974157b0875f5b4a722822bfad2.jpg","srcSet":"/static/2671afe594229fe1664a40807eb35854/f836f/18368974157b0875f5b4a722822bfad2.jpg 200w,\n/static/2671afe594229fe1664a40807eb35854/2244e/18368974157b0875f5b4a722822bfad2.jpg 400w,\n/static/2671afe594229fe1664a40807eb35854/14b42/18368974157b0875f5b4a722822bfad2.jpg 800w,\n/static/2671afe594229fe1664a40807eb35854/47498/18368974157b0875f5b4a722822bfad2.jpg 1200w,\n/static/2671afe594229fe1664a40807eb35854/ec6c5/18368974157b0875f5b4a722822bfad2.jpg 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"stack":[{"id":18,"title":"React.JS"},{"id":19,"title":"Iconify"},{"id":36,"title":"Google Map React"},{"id":51,"title":"Framer Motion"},{"id":42,"title":"html"},{"id":43,"title":"css"},{"id":44,"title":"javascript"}]}]}},"pageContext":{}}}